<template>
    <div>
        <!-- 新增 -->
        <el-button size="small" @click="addCategoryHandler">新增</el-button>
        <!-- 表格 -->
        <el-table :data="f_categories" style="width: 100%" size="small">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="分类名称" align="center"></el-table-column>
            <el-table-column prop="description" label="分类简介" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <el-link :underline="false" @click="editHandler(scope.row)">修改</el-link>
                    <el-link :underline="false" @click="deleteHandler(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    data() {
        return {
            title:'',
            form:{},
            dialogVisible: false
        }
    },
    computed: {
        ...mapState("category",["f_categories"])
    },
    created() {
        this.findAllCategory()
    },
    methods: {
        ...mapActions("category",["findAllCategory","saveOrUpdateCategory","deleteCategory"]),
        // 保存
        saveHandler() {
            this.saveOrUpdateCategory(this.form).then(res => {
                this.findAllCategory()
                this.dialogVisible = false
            })
        },
        // 修改
        editHandler(row) {
            this.dialogVisible = true
            this.form = row
            this.title = "修改分类信息"
        },
        // 删除
        deleteHandler(id) {
            this.deleteCategory(id).then(res => {
                this.findAllCategory()
            })
        },
        // 新增
        addCategoryHandler() {
            this.form = {}
            this.title = "录入分类信息"
            this.dialogVisible = true
        }
    }
}
</script>